<template>
    <div class="flex align-center justify-center chat-bg"
         :style="'height: '+windowHeight+'px;width:'+windowWidth+'px;'"
         style="background-color:#D2D4E0;">
        <div style="width: 1000px;height: 520px;background-color: #FFFFFF" class="flex flex-column align-center">
            <div class="flex">
                <span style="margin-top: 40px;margin-bottom: 40px;font-size: 30px;">欢迎注册九州缘起</span>
            </div>
            <div class="flex" style="margin-bottom: 20px;">
                <input style="width: 320px;height: 40px;" placeholder="设置你的用户编码" v-model="code"></input>
            </div>
            <div class="flex" style="margin-bottom: 20px;">
                <input style="width: 320px;height: 40px;" placeholder="设置你的登录密码" v-model="password"></input>
            </div>
            <div class="flex" style="margin-bottom: 20px;">
                <input style="width: 320px;height: 40px;" placeholder="请再次输入你的密码" v-model="passwordAgain"></input>
            </div>
            <div class="flex">
                <button style="width: 320px;height: 40px;font-size: 20px;margin-bottom: 20px;" @click="submitRegisterBody">同意条款并注册</button>
            </div>
            <div class="flex">
                <span>《阿里云网站服务条款》|《法律声明和隐私权政策》</span>
            </div>
            <div class="flex" v-if="errorCode!=''">
                <span style="color: red;font-size: 20px;">{{errorMsg}}</span>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "register",
        data() {
            return {
                current:0,
                listMouseEventBgColor:'background-color: #3A3C42;',
                windowHeight:0,
                windowWidth:0,
                chatHeight:0,
                code:'',
                password:'',
                passwordAgain:'',
                errorCode:'',
                errorMsg:''
            }
        },
        mounted:function(){
            this.windowHeight = document.documentElement.clientHeight;
            this.windowWidth = document.documentElement.clientWidth;
            // this.chatHeight = this.windowHeight - 20;
            // this.windowHeight = window.innerHeight;
            // console.log(this.windowHeight);
            // :style="'height:'+windowHeight+';'"
            //   style="background-color: red;height: 800px;"
        },
        methods:{
            mouseenter(index){
                this.current = index;
                // this.listMouseEventBgColor = 'background-color: #3A3C42;';
            },
            submitRegisterBody(){
                //vue-resource到vue2.0开始就不再维护，所以逐渐被淘汰
                // this.$http.post('/sevenchat/api/user/v1/register',{'code':this.code, 'password':this.password})
                //   .then((response)=>{
                //     console.log(response.body);
                //     this.$router.push({name:'login'});
                //   },(response)=>{
                //     console.error(response.body);
                //   });
                //axios的配置无法解决跨域
                this.$axios.post('/sevenchat/api/user/v1/register',{'code':this.code, 'password':this.password, 'userType':0})
                    .then((res)=>{
                        this.errorCode = '';
                        this.errorMsg = '';
                        console.log(res.data);
                        if(res.data.code=='10000'){
                            this.$router.push({name:'login'});
                        }else{
                            this.errorCode=res.data.code;
                            this.errorMsg = res.data.message;
                        }

                    })
                    .catch((err)=>{
                        console.error(err);
                    });
            }
        }
    }
</script>

<style scoped>

</style>
